<template>
     <div class="sot_list">
                <div id="div" @click="onSoret(index)" v-for="(item, index) in seotData" :key="index"
                    :class="seotIndex === index ? 'sots' : ''">{{ item }} <svg-icon class="sort"
                        :style="{ display: item === '排序' ? 'block' : 'none' }"
                        :name="sort === 0 ? 'sort1' : sort === 1 ? 'sort2' : 'sort3'" width="14"
                        height="14"></svg-icon>
                </div>
                <div class="sortTime" v-for="(item, index) in seotDatas" :key="index">
                    {{ item.text }} :
                    <span :style="{
                        width: index == 0 ? '17px' : '',
                        height: '17px',
                        background: index == 0 ? item.chi[indexAll[index].index] : 'rgba(0, 0, 0, 0)',
                        position: 'relative',
                        top: index == 0 ? '17px' : '0',
                        borderRadius: '3px'
                    }">
                        {{ index !== 0 ? item.chi[indexAll[index].index] : '' }} <svg-icon
                            :id="index === 0 ? 'span' : ''" class="sanjiao" name="sanjiao" width="14"
                            height="14"></svg-icon></span>
                    <div class="sort_box" :id="'id' + index">
                        <div :style="{
                            width: index == 0 ? '20px' : '100%',
                            height: index == 0 ? '20px' : '',
                            background: index == 0 ? items : 'rgba(0, 0, 0, 0)',
                        }" v-for="(items, index2) in item.chi" :key="index2"  @click="onClassify(index,index2,items)" >
                            <div :class="'text_list texts' + index2">{{ index !== 0 ? items : '' }}
                                <div class="chiList" v-if="index === 3">
                                    <div v-for="(itema, index3) in item.chi2"  :key="index3" class="text_lists">{{ itema }}
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
</template>

<script setup lang="ts">
import {inject} from 'vue';
defineProps(['sort','seotIndex']);
const seotData = inject('seotData'),
seotDatas = inject('seotDatas'),
indexAll = inject('indexAll'),
onClassify = inject('onClassify'),
onSoret = inject('onSoret');


</script>

<style scoped lang="scss">

.sot_list {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
    #div {
        margin: 0 20px 0 0;
        line-height: 50px;
        padding: 0;
        position: relative;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        justify-content: space-around;

        .sort {
            position: relative;
            left: 10px;
            top: 3px;
        }
    }

    .sots {
        color: #1261ff;
        font-weight: 600;
    }

    .sots::after {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 3px;
        content: "";
        background: #1261ff;
        border-radius: 2px;
    }

}
.sortTime {
    margin: 0 20px 0 10px;
    line-height: 50px;
    padding: 0;
    position: relative;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    position: relative;
    left: 5px;



    .sort_box {
        width: 120px;
        box-shadow: 0 0 10px #ccc;
        border-radius: 5px;
        position: absolute;
        z-index: 99999999999999999999999999;
        background: #fff;
        top: 50px;
        left: 10px;
        transform: scaleY(0);
        transition: all .3s ease-in-out;
        transform-origin: top;
        color: rgb(46, 46, 46);
        // overflow: hidden;

        .text_list {
            line-height: 30px;
            padding-left: 10px;

            .chiList {
                position: absolute;
                width: 120px;
                height: 100px;
                background: white;
                left: 100px;
                border-radius: 5px;
                left: 120px;
                top: 30px;
                box-shadow: 0 0 10px #ccc;
                transform: scaleY(0);
                transition: all .3s ease-in-out;

                .text_lists {
                    line-height: 30px;
                    padding-left: 10px;
                }

                .text_lists:hover {
                    background: #efefef;
                }

            }
        }

        .texts1:hover .chiList {
            transform: scaleY(1);
            transition: all .3s ease-in-out;
            transform-origin: top;
        }

        .text_list:hover {
            background: #efefef;
        }


    }

    .sanjiao {
        position: absolute;
        top: 18px;
        right: -15px;
    }

    #span {
        position: absolute;
        top: 2px;
        left: 20px;
    }
}

.sortTime:hover .sort_box {
    transform: scaleY(1);
    transition: all .3s ease-in-out;
    transform-origin: top;
}

.sortTime:hover span {
    color: #1261ff;
}

.sortTime:hover .sanjiao {
    transform: rotate(180deg);
    transition: all .3s ease-in-out;
}

.sortTime::after {
    content: "|";
    position: absolute;
    left: -12px;
    color: #969696;
    font-size: 14px;
    font-weight: 100;
    transform: scalex(.5);
}


#id0 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    div {
        margin: 5px 10px;
        border-radius: 4px;
    }

    .sanjiao {
        position: absolute;
        left: 25px;
    }
}

#id1 {
    position: absolute;
    z-index: 9999999999999;
    height: 120px;

}

#id2 {
    position: absolute;
    z-index: 9999999999999;
    height: 120px;

}

#id3 {
    position: absolute;
    z-index: 9999999999999;
    height: 120px;

}
</style>